<template>
  <div class="song">
     <img :src="pic" alt="" id="img">
     <img src="" alt="">
    <div class="top">
      <div class="title"> 
          <h1>{{this.$route.query.songname}}</h1>
          <h2>{{this.$route.query.name}}</h2>
        </div>
          
        <div class="text">
            <ul class="lyric"  ref="lyric">
              <li :class="{each:true}" v-for="(item,index) in lary1" :key="index" >
            <div class="sss"><p :id="index" ref="ly" class="p"> {{item}}</p></div>
             </li>
                </ul>

          </div>

           <div class="img">
             <img :src="pic" alt="">
           </div>
    
    </div>

      <div class="audio">
         <audio controls="controls" loop autoplay ref="audio" :src="music1" id="audio">  
      </audio> 
     </div>
  </div>
</template>

<script>
export default {
    data(){
        return {
            song:'',
            msg:'',
            songid:'',
            lary:[],
            lary1:'',
            lrcObj:{},
            music1:null,
            song:'',
            pic:''        
        }
    },
    
    methods:{
       vkey(){
        this.axios.get(`http://111.229.20.115:8001/music/song?songmid=${this.song||this.songid}&guid=85640610&lyric=1&format=json&inCharset=utf8&outCharset=utf-8`).then(res=>{
          
        this.music1=res.data.data.musicUrl.split(",")[0]
        // console.log(this.music1);
       
        
        }).catch(err=>{
        console.log(err);
        })
    },

      getliyl(){
        this.axios.get(`http://111.229.20.115:8001/music/lyric?songmid=${this.songid||this.song}&format=json&nobase64=1`)
        .then(res=>{
          this.lary=res.data.data.lyric.split('[').slice(1)
         this.lary.forEach((item,index) => {
          let arr = item.split(']');	// 再分割右括号
         // 时间换算成秒
         let m = parseInt(arr[0].split(':')[0])
         let s = parseInt(arr[0].split(':')[1])
         arr[0] = m*60 + s;
         if (arr[1] != '\n') { // 去除歌词中的换行符
             this.lrcObj[arr[0]] = arr[1];
         }
         this.lary1=this.lrcObj
         setTimeout(()=>{
            var time=document.querySelectorAll('.p')
           var  music=document.getElementById('audio')
              var num=0
         music.addEventListener('timeupdate',function(){
          var currtime=parseInt(this.currentTime)
          //  console.log(document.getElementById(currtime));
          if(document.getElementById(currtime)){
              for(var i=0;i<time.length;i++){
                time[i].style.color='#000'
                time[i].style.fontSize=16+'px'
                 time[i].style.fontWeight='500'
                //  console.log( time[i]);
              }
             document.getElementById(currtime).style.color='#fff'
              
              document.getElementById(currtime).style.fontSize=20+'px'
               document.getElementById(currtime).style.fontWeight=800
                document.getElementById(currtime).style. transition=1+'s'
              if(time[num].id==currtime){
                   for(var i=0;i< document.querySelectorAll('.sss').length;i++){
                 document.querySelectorAll('.sss')[i].style.top=-30*num+'px'
                  document.querySelectorAll('.sss')[i].style.transition=1+'s'
                 }
                 num++
              }
           }
           
         })
         })
         });

        }).catch(err=>{
          console.log(err);
        })
      },
      getsingerpic(){
        var pic=this.$route.query.name
        this.axios.get(`lkeyapi/search/get/web?s=${pic}&type=100`)
        .then(res=>{
          this.pic=res.data.result.artists[0].picUrl
          console.log(this.pic);
        }).catch(err=>{
          console.log(err);
        })
      }
    
    },
    created(){
       
       this.songid=this.$route.query.songid
        this.song=this.$route.query.song
        this.vkey()
       this.getliyl() 
       this.music1
       this.getsingerpic()
    },
   
}
</script>

<style lang="scss" scoped>
#img{
position: absolute;
    filter:blur(205px);
    z-index: -1;
    // background: #333;
    width: 100%;
    // height: 720px;
    // top: 250px;
    left: 0px;
    bottom: 0;
    background-size: cover;
}
.title{
  width: 200px;
  margin-left: 200px;
position: absolute;
// margin-top: 150px;

}
.song::before{
   content: "";
    position: absolute;
    filter:blur(205px);
    z-index: -1;
    background: #333;
    width: 100%;
    // height: 720px;
    top: 250px;
    left: 0px;
    bottom: 0;
    background-size: cover;
}
.song{
  width: 100%;
 position: absolute;
 bottom: 0;
//  height: 800px;
// //  height: 100%;
//  border: 1px solid;
 .top{
   display: flex;
   width: 1400px;
   margin: 0 auto;
  //  border: 1px solid;
    justify-content: space-between;
    height: 550px;
  .img{
    // margin-top: -200px;
    img{
    display: inline-block;
  border: 50px solid;
border-radius: 50%;
overflow: hidden;
background-color: #333;
animation: rotate 8s linear infinite; 
       margin: 0 auto;
       width: 200px;
      height: 200px;
      
    }
   
  }
  .text{
    width: 1400px;
    margin: 0 auto;
    position: relative;
     
    
    
  }
     .lyric {
        width: 1400px;
        height: 480px;
        position: absolute;
        // top: 150px;
        text-align: center;
        margin: 0 auto;
        overflow: auto;
        color: #000;
        font-size: 16px;
        font-weight: normal;
        .each {
        height: 30px;
        line-height: 30px;
        text-align: center;
        }
        
        &::-webkit-scrollbar {
            width: 3px;
            height: 1px;
            display: none;
        }
        // 滑块部分
        &::-webkit-scrollbar-thumb {
            background-color: #eee;
        }
        // 轨道部分
        &::-webkit-scrollbar-track {
            background-color: #333;
        }
    }

.sss{
  position: relative;
  top: 0px;
}
   
  
 }
 .audio{
     width: 1400px;
      margin: 0 auto;
      height: 100px;
      audio{
        width: 1400px;
      
    
    }
   }
 
}
</style>